<template>
  <a-card :body-style="{ padding: 0 }">
    <div>
      <a-button key="1" type="primary" @click="handleAdd" style="margin-right: 10px;" :disabled="addbuttonstate">
        新增
      </a-button>
     
      <a-button key="2" type="primary" @click="handleAdd" style="margin-right: 10px;" :disabled="canclebuttonstate">
        取消
      </a-button>
      <a-button key="3" type="primary" @click="handleOk" :disabled="savebuttonstate" style="margin-right: 10px;">
        保存
      </a-button>
      <a-button key="4" type="primary" @click="handleAddSubmit" :disabled="submitbuttonstate"
        style="margin-right: 10px;">
        提交
      </a-button>
      <a-button key="5" type="primary" @click="handleDel" :disabled="deletebuttonstate" style="margin-right: 10px;">
        删除
      </a-button>
      <a-button key="6" type="primary" @click="handleDel" :disabled="changebuttonstate" style="margin-right: 10px;">
        变更
      </a-button>
      <a-button key="7" type="primary" @click="handleEdit" :disabled="editbuttonstate" style="margin-right: 10px;">
        编辑
      </a-button>
      <a-dropdown style="margin-right: 10px;" :disabled="printbuttonstate">
        <a-menu slot="overlay" @click="handlePrintWithModelId">
          <a-menu-item key="po">打印Pdf </a-menu-item>
          <a-menu-item key="2">excel导出</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 打印 <a-icon type="down" /> </a-button>
      </a-dropdown>
      <a-dropdown style="margin-right: 10px;" :disabled="auditbuttonstate">
        <a-menu slot="overlay" @click="handleAddPost">
          <a-menu-item key="2">审批通过 </a-menu-item>
          <a-menu-item key="3">审批不通过</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 审批 <a-icon type="down" /> </a-button>
      </a-dropdown>

      <!-- <a-page-header :ghost="false" title="采购订单制单">
        <template slot="extra">
          <a-button key="3" type="primary" @click="handleOk" :disabled="formDisabled">
            保存
          </a-button>
          <a-button key="2" type="primary" :disabled="formDisabled">
            提交审核
          </a-button>
          <a-button key="1" type="primary" :disabled="formDisabled">
            取消审核
          </a-button>
        </template>
</a-page-header> -->
      <img v-if="model.status == '0' || model.status == undefined" width="60" height="40" src="~@/assets/zhidan.png"
        style="float: right; " />

      <img v-if="model.status == '1'" width="60" height="40" src="~@/assets/shenpizhong.png" style="float: right; " />
      <img v-if="model.status == '2'" width="60" height="40" src="~@/assets/tongguo.png" style="float: right; " />
      <img v-if="model.status == '3'" width="60" height="40" src="~@/assets/weitongguo.png" style="float: right; " />
    </div>
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="项目编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
                <a-input v-model="model.code" placeholder="请输入项目编号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="请输入项目名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerid">
                <a-input v-model="model.customerid" placeholder="请输入客户"></a-input>
                <!-- <c-select-customer v-model="model.customerid" placeholder="请输入客户" :buttons="false"></c-select-customer> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="币种" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currencyid">
                <a-input v-model="model.currencyid" placeholder="请输入币种"></a-input>
                <!-- <j-search-select-tag v-model="model.currencyid" placeholder="请输入币种"
                  dict="currency,currencyname,id"></j-search-select-tag> -->
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="销售合同" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customercontract">
                <a-input v-model="model.customercontract" placeholder="请输入销售合同"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="客户地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customeraddress">
                <a-input v-model="model.customeraddress" placeholder="请输入客户地址"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="assignedto">
                <!-- <a-input v-model="model.assignedto" placeholder="请输入负责人"></a-input> -->
                <!-- <c-select-user v-model="model.assignedto" placeholder="请输入负责人" :buttons="false"></c-select-user> -->
                <j-select-multi-user v-model="model.assignedto"></j-select-multi-user>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fromdate">
                <j-date placeholder="请选择开始日期" v-model="model.fromdate" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enddate">
                <j-date placeholder="请选择结束日期" v-model="model.enddate" style="width: 100%" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="项目成员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="members">
                <!-- <a-input v-model="model.members" placeholder="请输入项目成员"></a-input> -->

                <c-select-user v-model="model.members" multiple="true" :buttons="false"></c-select-user>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="项目标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projecttags">
                <!-- <a-input v-model="model.projecttags" placeholder="请输入项目标签"></a-input> -->
                <template v-for="(tag, index) in tags">
                  <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                    <a-tag color="pink" :key="tag" :closable="index == 0" @close="() => handleClose(tag)">
                      {{ `${tag.slice(0, 20)}...` }}
                    </a-tag>
                  </a-tooltip>
                  <a-tag color="pink" v-else :key="tag" :closable="index >= 0" @close="() => handleClose(tag)">
                    {{ tag }}
                  </a-tag>
                </template>
                <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
                  :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
                  @keyup.enter="handleInputConfirm" />
                <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                  <a-icon type="plus" /> New Tag
                </a-tag>
              </a-form-model-item>
            </a-col>
            <a-col :span='6'>
              <a-form-model-item label="项目进度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectprogress"
                disabled="true">

                <a-input-number v-model:value="model.projectprogress" :min="0" :max="100"
                  :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
                <a-textarea v-model="model.remarks" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="项目任务分录" :key="refKeys[0]" :forceRender="true">
          <j-vxe-table keep-source :ref="refKeys[0]" :loading="projectitemTable.loading"
            :columns="projectitemTable.columns" :dataSource="projectitemTable.dataSource" :maxHeight="300"
            :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="false">

            <template v-slot:progressSlot="props">
              <span>
                <a-progress stroke-linecap="square" :percent=props.value />
              </span>
            </template>
            <template v-slot:tagSlot="props">
              <span>
                <a-tag v-for="tag in getTags(props.value)" :key="tag" color="pink">
                  {{ tag }}
                </a-tag>
              </span>
            </template>
          </j-vxe-table>
        </a-tab-pane>
        <a-tab-pane tab="项目计划" :key="refKeys[1]" :forceRender="true">
          <j-vxe-table keep-source :ref="refKeys[1]" :loading="projectplannedtimeTable.loading"
            :columns="projectplannedtimeTable.columns" :dataSource="projectplannedtimeTable.dataSource" :maxHeight="300"
            :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" />
        </a-tab-pane>
        <a-tab-pane tab="项目销售分录" :key="refKeys[2]" :forceRender="true">
          <j-vxe-table keep-source :ref="refKeys[2]" :loading="projectsalesitemTable.loading"
            :columns="projectsalesitemTable.columns" :dataSource="projectsalesitemTable.dataSource" :maxHeight="300"
            :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" />
        </a-tab-pane>
        <a-tab-pane tab="项目采购分录" :key="refKeys[3]" :forceRender="true">
          <j-vxe-table keep-source :ref="refKeys[3]" :loading="projectpoitemTable.loading"
            :columns="projectpoitemTable.columns" :dataSource="projectpoitemTable.dataSource" :maxHeight="300"
            :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" />
        </a-tab-pane>
        <a-tab-pane tab="项目费用分录" :key="refKeys[4]" :forceRender="true">
          <j-vxe-table keep-source :ref="refKeys[4]" :loading="projectexpenseTable.loading"
            :columns="projectexpenseTable.columns" :dataSource="projectexpenseTable.dataSource" :maxHeight="300"
            :disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="false" />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>

import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

export default {
  name: 'ProjectForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
  },
  data () {
    return {
      tags: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
      },
      refKeys: ['projectitem', 'projectplannedtime', 'projectsalesitem', 'projectpoitem', 'projectexpense',],
      tableKeys: ['projectitem', 'projectplannedtime', 'projectsalesitem', 'projectpoitem', 'projectexpense',],
      activeKey: 'projectitem',
      // 项目任务分录
      projectitemTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '任务名称',
            key: 'taskname',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '责任人',
            key: 'assigntoid_dictText',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '任务分类',
            key: 'taskcate_dictText',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '任务标签',
            key: 'tasktag',
            type: JVXETypes.slot,
            slotName: 'tagSlot',
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '任务开始日期',
            key: 'taskstartdate',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '任务结束日期',
            key: 'taskenddate',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '任务进度',
            key: 'taskprogress',
            type: JVXETypes.slot,
            slotName: "progressSlot",
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: 'parentid',
            key: 'parentid',
            type: JVXETypes.hidden,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ]
      },
      // 项目计划
      projectplannedtimeTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '计划时间',
            key: 'plannedhours',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '项目',
            key: 'projectid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '任务',
            key: 'projecttaskid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '人员',
            key: 'employeeid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '计划日期',
            key: 'plandate',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '开始时间',
            key: 'starttime',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '结束时间',
            key: 'endtime',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: 'parentid',
            key: 'parentid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ]
      },
      // 项目销售分录
      projectsalesitemTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '单据编号',
            key: 'billcode',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '单据日期',
            key: 'billdate',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '客户',
            key: 'customerid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '币种',
            key: 'currencyid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '创建日期',
            key: 'createtime',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '总含税金额',
            key: 'totaltaxinvalue',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '总不含税金额',
            key: 'totaltaxexvalue',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '单据状态',
            key: 'status',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ]
      },
      // 项目采购分录
      projectpoitemTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '单据编号',
            key: 'billcode',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '单据日期',
            key: 'billdate',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '供应商',
            key: 'vendorid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '创建日期',
            key: 'createtime',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '总含税金额',
            key: 'totaltaxinvalue',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '总不含税金额',
            key: 'totaltaxexvalue',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '币种',
            key: 'currencyid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '单据状态',
            key: 'status',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: 'parentid',
            key: 'parentid',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ]
      },
      // 项目费用分录
      projectexpenseTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: 'parentid',
            key: 'parentid',
            type: JVXETypes.hidden,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          // {
          //   title: '费用类型',
          //   key: 'expensetype',
          //   type: JVXETypes.input,
          //   width: "200px",
          //   placeholder: '请输入${title}',
          //   defaultValue: '',
          // },
          // {
          //   title: '项目',
          //   key: 'projectid',
          //   type: JVXETypes.input,
          //   width: "200px",
          //   placeholder: '请输入${title}',
          //   defaultValue: '',
          // },
          {
            title: '费用发生人',
            key: 'assigntoid_dictText',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '费用日期',
            key: 'expensedate',
            type: JVXETypes.date,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '费用含税金额',
            key: 'totaltaxinvalue',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '费用不含税金额',
            key: 'totaltaxexvalue',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '税额',
            key: 'tax',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '币种',
            key: 'currencyid_dictText',
            type: JVXETypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
        ]
      },
      url: {
        add: "/project.project/project/add",
        edit: "/project.project/project/edit",
        queryById: "/project.project/project/queryById",
        projectitem: {
          list: '/project.project/project/queryProjectitemByMainId'
        },
        projectplannedtime: {
          list: '/project.project/project/queryProjectplannedtimeByMainId'
        },
        projectsalesitem: {
          list: '/project.project/project/queryProjectsalesitemByMainId'
        },
        projectpoitem: {
          list: '/project.project/project/queryProjectpoitemByMainId'
        },
        projectexpense: {
          list: '/project.project/project/queryProjectexpenseByMainId'
        },
      }
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled () {
      return this.disabled
    },
  },
  created () {
  },
  methods: {
    getTags (text) {
      if (text != null && text != undefined && text != "") {
        return text.split(",")
      } else {
        return [];
      }
    },
    addBefore () {
      this.projectitemTable.dataSource = []
      this.projectplannedtimeTable.dataSource = []
      this.projectsalesitemTable.dataSource = []
      this.projectpoitemTable.dataSource = []
      this.projectexpenseTable.dataSource = []
    },
    getAllTable () {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter () {
      this.$nextTick(() => {
      })
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.projectitem.list, params, this.projectitemTable)
        this.requestSubTableData(this.url.projectplannedtime.list, params, this.projectplannedtimeTable)
        this.requestSubTableData(this.url.projectsalesitem.list, params, this.projectsalesitemTable)
        this.requestSubTableData(this.url.projectpoitem.list, params, this.projectpoitemTable)
        this.requestSubTableData(this.url.projectexpense.list, params, this.projectexpenseTable)
      }

      if (this.model.id) {
        let orgtags = this.model.projecttags;
        if (orgtags != null && orgtags != undefined && orgtags != "") {
          this.tags = orgtags.split(',');
        } else {
          this.tags = [];
        }
      }
    },
    //校验所有一对一子表表单
    validateSubForm (allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([
        ]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_FAILED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** 整理成formData */
    classifyIntoFormData (allValues) {
      this.model.projecttags = this.tags.join(',');
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        // projectitemList: allValues.tablesValue[0].tableData,
        // projectplannedtimeList: allValues.tablesValue[1].tableData,
        // projectsalesitemList: allValues.tablesValue[2].tableData,
        // projectpoitemList: allValues.tablesValue[3].tableData,
        // projectexpenseList: allValues.tablesValue[4].tableData,
      }
    },
    validateError (msg) {
      this.$message.error(msg)
    },

  }
}
</script>

<style scoped></style>